<html>
	<head>
		<meta charset="UTF-8">
		<title>javascript 一个页面多个tab选项卡效果</title>	
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<script>
		window.onload = function(){
			var main = document.getElementById("tabMain");
			var tab = new Tab(main);
			tab.init();
		}
			function Tab(id){
				this.aLi=id.getElementsByTagName("li");
				this.oDiv=id.getElementsByTagName("div");
			}
			Tab.prototype.init = function(){
				var obj =this;//tab实例化对象
				for(var i=0;i<obj.aLi.length;i++){
					obj.aLi[i].index = i;//给li添加一个索引
					obj.aLi[i].onclick=function(){
							obj.fnClick(this);//this当前点击的元素li
					}

				}
			}
				Tab.prototype.fnClick=function(aLi){
			for (var i =0;i<this.aLi.length;i++) 
			{
				this.aLi[i].className = "";
				this.oDiv[i].style.display = "none";
			}
			aLi.className = "active";
			this.oDiv[aLi.index].style.display = "block";
		};
		</script>
		<style>
			*{padding: 0;margin: 0; list-style: none;}
			.tabMenu{box-shadow: 10px 10px 10px gainsboro;width:300px;  margin:50px auto 0 auto;}
			.tabMenu ul{display: block; overflow: hidden;width:300px;height: 40px;background: #eee;}
			.tabMenu ul li{ cursor:pointer;display: block;float: left;width:100px; text-align: center;height: 40px; line-height: 40px;font-size:16px;}
			.tabMenu ul li.active{ background:dodgerblue;color:#fff;}
			.tabMenu .tabSide{display: none;padding:10px; line-height: 20px;white-space:pre-wrap; word-break:break-all;width:278px;border:solid 1px #eee; text-align: center;}
			.tabMenu div.active{ display: block;padding:10px; line-height: 20px;white-space:pre-wrap; word-break:break-all;width:278px;border:solid 1px #eee; text-align: center;}
		</style>
	</head>
	<body>
		<div id="tabMain" class="tabMenu">		
			<ul>
				<li class="active">疾风剑豪</li>
				<li>影流之主</li>
				<li>诡术</li>
			</ul>						
			<div class="tabSide active">亚索</div>
			<div class="tabSide">劫</div>
			<div class="tabSide">妖姬</div>			
		</div>
		
	</body>
</html>